import { Card, Col, Input, QRCode, Row, Space, theme } from 'antd';
import React from 'react';

const { useToken } = theme;

const QRCodeDemo: React.FC = () => {
    const [text, setText] = React.useState('https://ant.design/');
    const { token } = useToken();

    return (
        <Card title="二维码">
            <Row gutter={[20, 20]}>
                <Col span={12}>
                    <Card title="基本使用">
                        <Space direction="vertical" align="center">
                            <QRCode value={text || '-'} />
                            <Input
                                placeholder="-"
                                maxLength={60}
                                value={text}
                                onChange={(e) => setText(e.target.value)}
                            />
                        </Space>
                    </Card>
                </Col>
                <Col span={12}>
                    <Card title="自定义颜色">
                        <Row gutter={[10, 0]}>
                            <Col>
                                <QRCode value="https://ant.design/" color={token.colorSuccessText} />
                            </Col>
                            <Col>
                                <QRCode
                                    value="https://ant.design/"
                                    color={token.colorInfoText}
                                    bgColor={token.colorBgLayout}
                                />
                            </Col>
                        </Row>
                    </Card>
                </Col>
                <Col span={12}>
                    <Card title="不同类型">
                        <Row gutter={[10, 0]}>
                            <Col>
                                <p>canvas</p>
                                <QRCode type="canvas" value="https://ant.design/" />
                            </Col>
                            <Col>
                                <p>svg</p>
                                <QRCode type="svg" value="https://ant.design/" />
                            </Col>
                        </Row>
                    </Card>
                </Col>
            </Row>
        </Card>
    )
}

export default QRCodeDemo;